<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

    <title>目标拆解器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #ffffff;
        }

        .container {
            max-width: 420px;
            margin: 0 auto;
            padding: 30px 3px 35px 3px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
            top: 18px;

        }

        #task1-input1 {
            display: block;
            width: 275px;
            padding: 10px;
            margin-bottom: 15px;
            margin-left: 0px;
            border-radius: 25px;
            border: solid 1px #dbdbdb;
            box-shadow: 0px 0px 15px 0px rgba(165, 165, 165, 0.267);
            font-size: 15px;
            z-index: 3;
            position: relative;
        }

        .task1-text {
            display: inline-block;
            padding-left: 13px;
            position: relative;
            z-index: 2;
        }

        .task1-text:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background-color: #7fb9f7;
            border-radius: 2px;
        }


        #save-btn {
            display: block;
            padding: 8px;
            height: 35px;
            width: 60px;
            background-color: #007bff;
            color: #fff;

            margin-top: 5px;
            border: none;
            border-radius: 25px;
            position: absolute;
            right: -70px;
            top: 0;

            font-size: 14px;
        }

        .task1-item {
            list-style-type: none;
            padding: 10px 10px 42px 10px;
            margin-bottom: 18px;
            margin-left: -40px;
            background-color: #ffffff;
            border-radius: 10px;

            box-shadow: 0px 0px 10px 0px rgba(165, 165, 165, 0.158);
        }

        .task1-date {
            font-size: 16px;
            font-weight: bold;
            color: #727272;

        }

        .subtask1-btn {
            float: right;

            padding: 3px 6px 3px 6px;
            background-color: #d1d1d1;
            color: #ffffff;
            text-align: center;
            border: #1c446e;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0px 0px 8px 0px rgba(219, 219, 219, 0);
            margin-bottom: 1px;
            margin-top: 7px;
            white-space: nowrap;
            font-size: 14px;
        }


        .subtask1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 25px;
            font-style: italic;
            color: #666;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 15px;
            width: 100%;
            /* 添加这一行 */
        }




        .completed-count {
            font-size: 14px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 5px;
        }

        .button-wrapper {
            margin-left: auto;
            /* 修改这一行 */
        }


        .copy-btn {
            background-color: #ffffff;
            color: #9e9e9e;
            text-align: center;
            border: none;
            border-radius: 5px;
            white-space: nowrap;
            display: block;
            /* 已隐藏 */
        }

        .complete-btn {
            background-color: #ffffff;
            color: #9e9e9e;
            text-align: center;
            border: none;
            border-radius: 5px;
            white-space: nowrap;
            margin-right: 10px;
        }

        .delete-btn {
            background-color: #ffffff;
            color: #9e9e9e;
            text-align: center;
            border: none;
            border-radius: 5px;
            white-space: nowrap;
            margin-left: 3px;
            margin-right: 20px;
        }

        .edit-log-btn {
            background-color: #ffffff;
            color: #9e9e9e;
            text-align: center;
            border: none;
            border-radius: 5px;
            white-space: nowrap;
            margin-right: 3px;
            margin-left: 5px;
            float: right;
        }
        .delete-log-btn {
            float: right;
            background-color: #ffffff;
            color: #9e9e9e;
            text-align: center;
            border: none;
            border-radius: 5px;
            white-space: nowrap;
            margin-left: 1px;
            margin-right: 0px;
        }
        
        

        .log-list {
            border: 1px solid #eeeeee;
            border-radius: 5px;
            padding: 10px;
            color: #666;
            font-size: 14px;
        }

        .no-logs {
            border: none;
            padding: 0px;
        }

        .log-btn {
            position: relative;
            float: left;
            padding: 3px 5.5px 3px 5.5px;
            background-color: #d1d1d1;
            color: #ffffff;
            border: #1c446e;
            border-radius: 50%;
            margin-top: 7px;
            font-size: 14px;
        }
        
        .log-label {
    color: rgb(116, 116, 240);
    border: 1px solid rgb(200, 208, 255);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 12px;
    margin-right: 8px;
    
}


        .fixed-bottom {
            position: fixed;
            bottom: 0;
        }


        .count-wrapper {
            display: flex;
            justify-content: space-between;
        }

        .subtask1-count {
            font-size: 14px;

            color: #a46af0;
            margin-bottom: 5px;
            margin-top: 8px;
        }

        .completed-count {
            font-size: 14px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 8px;
            margin-top: 8px;
        }



        .content-wrapper {
            padding-top: 50px;
        }


        .task1-status {
            margin-left: 10px;
            font-size: 10px;
            padding: 3px 5px 2px 5px;
            border-radius: 3px;
            background-color: #ffffff;
            border: 1px solid #7fb9f7;
            appearance: none;
            color: #7fb9f7;

        }


        .task1-status option {
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #f5f5f5;
            color: #333;
        }

        .task1-status:focus {
            outline: none;
            border-color: #007bff;
        }




        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 10px 0;
            text-align: center;
            box-shadow: 0 8px 15px rgb(201, 201, 201);
            z-index: 4;
            color: #0b61bd;
            font-weight: bold;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }


        .statistics-btn {
            position: absolute;
            left: 5px;
            top: 11px;
            font-size: 16px;
            background-color: #e0535300;
            border: 1px solid #e7e7e700;
            color: #a7a7a7;
        }

        .chart-modal {
            position: fixed;
            left: 0;
            bottom: -100%;
            width: 100%;
            height: 30%;
            background-color: #f9f9f9;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            z-index: 1000;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 25px 25px 0px 0px;
        }

        .myChart {
            color: #4caf50;
        }

        .chart-modal.visible {
            bottom: 0;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.329);
            z-index: 999;
        }

        .counters1 {

            top: 51px;
            display: flex;
            gap: 10px;
            font-size: 14px;
            position: fixed;
            z-index: 4;
            background-color: #fff;
            padding: 15px 10px 15px 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            left: 0;
            right: 0;

            margin-top: -10px;
            border-radius: 0px 0px 15px 15px;
        }

        .total {
            margin-left: 15px;
            margin-top: 1px;
        }

        .unfinished {
            margin-left: 18px;
        }

        .finished {
            margin-left: 18px;

        }

        .total-sum {
            margin-left: -318px;
            margin-top: 31px;
        }

        .monthly-sum {
            margin-left: 18px;
            margin-top: 31px;
        }



        .monthly-number {
            color: #ffc400;
            font-size: 17px;
            font-weight: bold;
        }

        .total-number {
            color: #00ABFF;
            font-size: 17px;
            font-weight: bold;
        }


        .unfinished-number {
            color: #b61d12;
            font-size: 18px;
            font-weight: bold;
        }

        .finished-number {
            color: #2072B2;
            font-size: 18px;
            font-weight: bold;

        }
    </style>
</head>

<body>
    <div class="header">
        目标跟踪
        <button class="statistics-btn" id="statistics-btn">
            <i class="far fa-clock"></i>
        </button>

    </div>
    <div class="counters1">
        <div id="total-count" class="total"></div>
        <div id="unfinished-count" class="unfinished"></div>
        <div id="finished-count" class="finished"></div>
        <div id="total-sum" class="total-sum"></div>
        <div id="monthly-sum" class="monthly-sum"></div>

    </div>
    <div class="container content-wrapper">
        <div class="container">
            <div class="fixed-bottom">
                <input type="text" id="task1-input1" placeholder="输入待办任务">
                <button id="save-btn">保存</button>
            </div>
            <ul id="task1-list1"></ul>
        </div>
    </div>

    <!-- 新增弹窗及画布 -->
    <div class="overlay" id="overlay"></div>
    <div class="chart-modal" id="chart-modal">
        <canvas id="chart-canvas"></canvas>
    </div>


    <script>
        const task1Input1 = document.getElementById('task1-input1');
        const saveBtn = document.getElementById('save-btn');
        const task1List1 = document.getElementById('task1-list1');

        const statisticsBtn = document.getElementById('statistics-btn');
        const overlay = document.getElementById('overlay');
        const chartModal = document.getElementById('chart-modal');
        const chartCanvas = document.getElementById('chart-canvas');
        let chartInstance;

        statisticsBtn.addEventListener('click', () => {
            if (chartModal.classList.contains('visible')) {
                chartModal.classList.remove('visible');
                overlay.style.display = 'none'; // 隐藏覆盖层
            } else {
                chartModal.classList.add('visible');
                overlay.style.display = 'block'; // 显示覆盖层
                showChart();
            }
        });

        overlay.addEventListener('click', () => {
            chartModal.classList.remove('visible');
            overlay.style.display = 'none';
        });


        function showChart() {

            const task1s1 = getTasksFromLocalStorage();
            const chartData = task1s1.map((task1, index) => {
                const date = new Date(task1.date);
                const day = date.getDate();
                return {
                    x: index,
                    day: day,
                    y: task1.completedSubtask1s1
                };
            });
            const maxVisiblePoints = 20;
            const initialVisibleRange = chartData.length > maxVisiblePoints ? chartData.length - maxVisiblePoints : 0;

            if (chartInstance) {
                chartInstance.destroy();
            }

            chartInstance = new Chart(chartCanvas, {
                type: 'line',
                data: {
                    datasets: [{
                        label: '已完成子任务数',
                        data: chartData.map(data => ({ x: data.x, y: data.y })),
                        borderColor: '#4caf50',
                        backgroundColor: 'rgba(76, 175, 80, 0.2)',
                        borderWidth: 2,
                        pointRadius: 4,
                        pointBackgroundColor: '#4caf50',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#4caf50',
                        tension: 0.3
                    }]
                },
                options: {

                    scales: {
                        x: {
                            type: 'linear',
                            min: initialVisibleRange,
                            max: chartData.length > maxVisiblePoints ? maxVisiblePoints - 1 + initialVisibleRange : chartData.length - 1,

                            title: {
                                display: true,
                                text: '任务',
                                color: '#333',
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                }
                            },
                            ticks: {
                                color: '#333',
                                callback: (value, index) => {
                                    return chartData[index] ? chartData[index].day : value;
                                }
                            },
                            grid: {
                                color: '#e0e0e0'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: '已完成子任务数',
                                color: '#333',
                                font: {
                                    size: 14,
                                    weight: 'bold'
                                }
                            },
                            grid: {
                                color: '#e0e0e0'
                            },
                            ticks: {
                                color: '#333'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: '#333',
                                font: {
                                    size: 14
                                }
                            }
                        }
                    }
                }
            });
            const hammer = new Hammer(chartCanvas);
            const panOptions = {
                threshold: 10
            };
            hammer.get('pan').set(panOptions);

            hammer.on('panleft', (ev) => {
                const xScale = chartInstance.scales.x;
                if (xScale.max < chartData.length - 1) {
                    xScale.options.min += 1;
                    xScale.options.max += 1;
                    chartInstance.update();
                }
            });

            hammer.on('panright', (ev) => {
                const xScale = chartInstance.scales.x;
                if (xScale.min > 0) {
                    xScale.options.min -= 1;
                    xScale.options.max -= 1;
                    chartInstance.update();
                }
            });
        }
        saveBtn.addEventListener('click', saveTask);

        function saveTask() {
            if (task1Input1.value.trim() !== '') {
                const task1 = {
                    id: Date.now(),
                    text: task1Input1.value,
                    date: new Date(),
                    status: "未完成",
                    subtask1s11: [],
                    completedSubtask1s1: 0 // 添加completedSubtask1s1属性
                };

                const task1s1 = getTasksFromLocalStorage();
                task1s1.push(task1);
                localStorage.setItem('task1s1', JSON.stringify(task1s1));

                task1Input1.value = '';
                renderTasks();
            }
        }

        function renderTasks() {
            task1List1.innerHTML = '';
            const task1s1 = getTasksFromLocalStorage();
            // 添加以下代码以显示任务数量
            const totalCount = task1s1.length;
            const unfinishedCount = task1s1.filter(task1 => task1.status === '未完成').length;
            const finishedCount = task1s1.filter(task1 => task1.status === '已完成').length;
            document.getElementById('total-count').innerHTML = `已记录：<span class="total-number">${totalCount}</span> 天`;
            document.getElementById('unfinished-count').innerHTML = `自律失败：<span class="unfinished-number">${unfinishedCount}</span> 天`;
            document.getElementById('finished-count').innerHTML = `成功执行：<span class="finished-number">${finishedCount}</span> 天`;


            // 在这里计算累加值
            const currentMonth = new Date().getMonth();
            const currentYear = new Date().getFullYear();
            const monthlySum = task1s1.filter(task1 => new Date(task1.date).getMonth() === currentMonth && new Date(task1.date).getFullYear() === currentYear).reduce((sum, task1) => sum + task1.completedSubtask1s1, 0);
            const totalSum = task1s1.reduce((sum, task1) => sum + task1.completedSubtask1s1, 0);

            // 在这里显示累加值
            document.getElementById('monthly-sum').innerHTML = `本月阅读：<span class="monthly-number">${monthlySum}</span> 篇`;
            document.getElementById('total-sum').innerHTML = `总阅读：<span class="total-number">${totalSum}</span> 篇`;



            task1s1.forEach(task1 => {


                const li = document.createElement('li');
                li.classList.add('task1-item');
                li.dataset.id = task1.id;

                const date = new Date(task1.date);
                const formattedDate = `${date.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                })} ${date.toLocaleString('zh-CN', { weekday: 'long' })}`;



                li.innerHTML += `
<span class="task1-date">${formattedDate}</span>
<select class="task1-status" data-task1-id="${task1.id}">
<option value="未完成" ${task1.status === "未完成" ? "selected" : ""}>未完成</option>
<option value="已完成" ${task1.status === "已完成" ? "selected" : ""}>已完成</option>
</select>`;

                const countWrapper = document.createElement('div');
                countWrapper.classList.add('count-wrapper');

                const subtask1Count = document.createElement('div');
                subtask1Count.classList.add('subtask1-count');
                subtask1Count.innerText = `待阅读：${task1.subtask1s11.length}`;
                countWrapper.appendChild(subtask1Count);

                const completedCount = document.createElement('div');
                completedCount.classList.add('completed-count');
                completedCount.innerText = `今日已阅读：${task1.completedSubtask1s1} 篇`;
                countWrapper.appendChild(completedCount);

                li.appendChild(countWrapper);

                li.innerHTML += `
<span class="task1-text">${task1.text}</span>
`;

                const task1StatusDropdown = li.querySelector('.task1-status');
                task1StatusDropdown.addEventListener('change', (e) => {
                    const task1Id = e.target.getAttribute('data-task1-id');
                    const task1s1 = getTasksFromLocalStorage();
                    const task1Index = task1s1.findIndex((t) => t.id === parseInt(task1Id));
                    task1s1[task1Index].status = e.target.value;
                    localStorage.setItem('task1s1', JSON.stringify(task1s1));
                    renderTasks();
                });





                const deleteBtn = document.createElement('button');
                deleteBtn.classList.add('delete-btn');
                deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
                li.appendChild(deleteBtn);


                deleteBtn.addEventListener('click', () => {
                    const confirmed = confirm('确定删除该待办任务吗？');
                    if (confirmed) {
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1.splice(task1Index, 1);
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));
                        renderTasks();
                    }
                });





                const subtask1Wrapper = document.createElement('div');
                subtask1Wrapper.classList.add('subtask1-wrapper');



                task1.subtask1s11.forEach(subtask1 => {
                    const subtask1El = document.createElement('div');
                    subtask1El.classList.add('subtask1');
                    subtask1El.innerText = subtask1.text;

                    const buttonWrapper = document.createElement('div');
                    buttonWrapper.style.display = 'inline-flex';

                    // 添加复制按钮及图标
                  const completeBtn = document.createElement('button');
                    completeBtn.classList.add('complete-btn');
                    const completeIcon = document.createElement('i');
                    completeIcon.classList.add('fas', 'fa-check');
                    completeBtn.appendChild(completeIcon);
                    buttonWrapper.appendChild(completeBtn);
                    
                      const copyBtn = document.createElement('button');
                    copyBtn.classList.add('copy-btn');
                    copyBtn.innerHTML = '<i class="fas fa-plus"></i>';
                    buttonWrapper.appendChild(copyBtn);

                    


                    const deleteBtn = document.createElement('button');
                    deleteBtn.classList.add('delete-btn');
                    deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
                    buttonWrapper.appendChild(deleteBtn);

                    subtask1El.appendChild(buttonWrapper);


                    deleteBtn.addEventListener('click', () => {
                        const subtask1Index = task1.subtask1s11.findIndex(s => s.id === subtask1.id);
                        task1.subtask1s11.splice(subtask1Index, 1);

                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1[task1Index] = task1;
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();
                    });

                    completeBtn.addEventListener('click', () => {
                        task1.completedSubtask1s1 += 1;
                        const subtask1Index = task1.subtask1s11.findIndex(s => s.id === subtask1.id);
                        task1.subtask1s11.splice(subtask1Index, 1);

                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1[task1Index] = task1;
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();

                        // 在这里调用 showToast 函数
                        showToast('🏅阅读完成 + 1', 1000);
                    });


                    // 新增 showToast 函数
                    function showToast(message, duration) {
                        const toast = document.createElement('div');
                        toast.innerText = message;
                        toast.style.position = 'fixed';
                        toast.style.left = '50%';
                        toast.style.bottom = '70%';
                        toast.style.transform = 'translateX(-50%)';
                        toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                        toast.style.color = 'white';
                        toast.style.padding = '10px 20px';
                        toast.style.borderRadius = '5px';
                        toast.style.zIndex = '1001';
                        document.body.appendChild(toast);

                        setTimeout(() => {
                            toast.remove();
                        }, duration);
                    }


                    copyBtn.addEventListener('click', () => {
                        const newSubtask1 = {
                            id: Date.now(),
                            text: subtask1.text
                        };

                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1[task1Index].subtask1s11.push(newSubtask1);
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();

                        // 在这里调用 showToast 函数
                        showToast('任务复制成功', 1000);
                    });





                    subtask1Wrapper.appendChild(subtask1El);
                });
                li.appendChild(subtask1Wrapper);

                // 添加日志按钮
                const logBtn = document.createElement('button');
                logBtn.classList.add('log-btn');
                logBtn.innerHTML = '<i class="fab fa-pied-piper-square"></i>';


                // 添加日志按钮点击事件
                logBtn.addEventListener('click', () => {
                    const logText = prompt('输入复盘内容:');
                    if (logText && logText.trim() !== '') {
                        const log = {
                            id: Date.now(),
                            text: logText
                        };

                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        if (!task1s1[task1Index].logs) {
                            task1s1[task1Index].logs = [];
                        }
                        task1s1[task1Index].logs.push(log);
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();
                    }
                });
                const logList = document.createElement('ul');
                logList.classList.add('log-list');
                logList.style.listStyleType = 'none';

                if (task1.logs && task1.logs.length > 0) {
                    logList.classList.remove('no-logs');
                } else {
                    logList.classList.add('no-logs');
                }

                (task1.logs || []).forEach(log => {
                    const logItem = document.createElement('li');

                    logItem.classList.add('log-item');
                    logItem.innerText = log.text;

                    const logLabel = document.createElement('span');
logLabel.classList.add('log-label');
logLabel.innerText = '复盘●反思';
logItem.insertBefore(logLabel, logItem.firstChild);


                    logList.appendChild(logItem);

                   

                    const deleteLogBtn = document.createElement('button');
                    deleteLogBtn.classList.add('delete-log-btn');
                    deleteLogBtn.innerHTML = '<i class="fas fa-trash"></i>';
                    logItem.appendChild(deleteLogBtn);

                    const editLogBtn = document.createElement('button');
                    editLogBtn.classList.add('edit-log-btn');
                    editLogBtn.innerHTML = '<i class="fas fa-edit"></i>';
                    logItem.appendChild(editLogBtn);

                    editLogBtn.addEventListener('click', () => {
                        const newLogText = prompt('编辑日志内容:', log.text);
                        if (newLogText !== null && newLogText.trim() !== '') {
                            const task1s1 = getTasksFromLocalStorage();
                            const task1Index = task1s1.findIndex(t => t.id === task1.id);
                            const logIndex = task1s1[task1Index].logs.findIndex(l => l.id === log.id);
                            task1s1[task1Index].logs[logIndex].text = newLogText;
                            localStorage.setItem('task1s1', JSON.stringify(task1s1));

                            renderTasks();
                        }
                    });

                    deleteLogBtn.addEventListener('click', () => {
                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1[task1Index].logs = task1s1[task1Index].logs.filter(l => l.id !== log.id);
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();
                    });
                });

                li.appendChild(logList);
                li.appendChild(logBtn);
                task1List1.appendChild(li);

                // 修改这里：将“新增子任务”按钮从 innerHTML 移到 createElement 阅读任务
                const subtask1Btn = document.createElement('button');
                subtask1Btn.classList.add('subtask1-btn');
                subtask1Btn.innerHTML = '<i class="fas fa-plus"></i>';
                li.appendChild(subtask1Btn);

                // 修改这里：添加事件监听器到 subtask1Btn，而不是 li.querySelector('.subtask1-btn')
                subtask1Btn.addEventListener('click', () => {
                    const subtask1Text = prompt('输入子任务:');
                    if (subtask1Text && subtask1Text.trim() !== '') {
                        const subtask1 = {
                            id: Date.now(),
                            text: subtask1Text
                        };

                        const task1s1 = getTasksFromLocalStorage();
                        const task1Index = task1s1.findIndex(t => t.id === task1.id);
                        task1s1[task1Index].subtask1s11.push(subtask1);
                        localStorage.setItem('task1s1', JSON.stringify(task1s1));

                        renderTasks();
                    }
                });

            });
            window.scrollTo(0, document.body.scrollHeight);
        }





        function getTasksFromLocalStorage() {
            return JSON.parse(localStorage.getItem('task1s1')) || [];
        }

        renderTasks();
        // 添加这一行使页面在加载后滚动到底部
        window.scrollTo(0, document.body.scrollHeight);
    </script>
</body>

</html>